<template>
  <!-- 首页入口(分类+广告) -->
  <div class="home-entry">
    <div class="container">
      <!-- 左侧分类 -->
      <HomeCategory />
      <!-- 轮播图 -->
      <HomeBanner />
    </div>
  </div>
  <!-- 新鲜好物 -->
  <HomeNew />
  <!-- 人气推荐 -->
  <HomeHot />
  <!-- vue动画
  <button @click="show=true">显示</button>
  <button @click="show=false">隐藏</button>
  <Transition>
    <div v-show="show" class="box" />
  </Transition>
  <Transition name="h">
    <div v-show="show" class="box" />
  </Transition>-->
  <!-- 热门品牌 -->
  <HomeBrand />
  <!-- 商品区域 -->
  <HomeProduct />
  <!-- 最新专题 -->
  <HomeSpecial />
</template>

<script>
import { defineAsyncComponent, ref } from 'vue'
export default {
  name: 'HomePage',
  components: {
    HomeCategory: defineAsyncComponent(() => import('./components/home-category.vue')),
    HomeBanner: defineAsyncComponent(() => import('./components/home-banner.vue')),
    HomeNew: defineAsyncComponent(() => import('./components/home-new.vue')),
    HomeHot: defineAsyncComponent(() => import('./components/home-hot.vue')),
    HomeBrand: defineAsyncComponent(() => import('./components/home-brand.vue')),
    HomeProduct: defineAsyncComponent(() => import('./components/home-product.vue')),
    HomeSpecial: defineAsyncComponent(() => import('./components/home-special.vue'))
  },
  setup () {
    const show = ref(true)
    return { show }
  }
}
</script>
<!--<style lang="less" scoped>
.box{
  width: 100px;
  height: 100px;
  background-color: red;
}
// 使用Tranistion组件实现动画，一个元素或者组件的（显示|隐藏，创建|移除)
// 进入前 v-enter(v-enter-from) Vue3
// 进入中 v-enter-active
// 进入后 v-enter-to

// 离开前 v-leave(v-leave-from) Vue3
// 离开中 v-leave-active
// 离开后 v-leave-to

// 需求: 一个盒子再显示隐藏的时候做淡入淡出动画
// 1．准备盒子
// 2．控制显示隐藏
// 3．加入动画
.v-enter-from {
  opacity:0
}
.v-enter-active {
  transition: all 2s
}
.v-enter-to{
  opacity:1
}
.v-leave-from{
  opacity:1
}
.v-leave-active {
  transition: all 2s
}
.v-leave-to{
  opacity:0
}
.h-enter-from {
  height:0
}
.h-enter-active {
  transition: all 2s
}
.h-enter-to{
  height:100px
}
.h-leave-from{
  height:100px
}
.h-leave-active {
  transition: all 2s
}
.h-leave-to{
  height:0
}
</style>-->
